<template>
  <q-card flat>
    <q-tabs
      dense
      v-model="pageParam.type"
      @update:model-value="
        (val) => {
          router.push({
            path: '/personal/' + userId + '/' + val,
          })
        }
      "
      align="left"
      active-color="primary"
    >
      <q-tab v-for="item in userTab" :name="item.code" :label="item.text" :key="item.code" />
    </q-tabs>
    <div class="absolute-right row items-center">
      <q-input
        dense
        borderless
        v-model="pageParam.text"
        type="text"
        label="查询字段"
        debounce="500"
        @update:model-value="
          (val) => {
            pageParam.pageNum = 1
            pageParam.text = val as string
            f5()
          }
        "
      />
      <q-btn
        flat
        icon="refresh"
        @click="
          () => {
            f5()
          }
        "
      >
        <q-tooltip> 刷新 </q-tooltip>
      </q-btn>
    </div>
  </q-card>
  <div class="row h-180px" v-if="loading">
    <div class="col-6" v-for="i in 2" :key="i">
      <q-card class="q-ma-md h-140px">
        <q-card-section>
          <div class="row q-gutter-md">
            <q-skeleton type="QAvatar" />
            <div>
              <q-skeleton type="text" class="w-80px" />
              <q-skeleton type="text" class="w-120px" />
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </div>
  <q-tab-panels v-model="pageParam.type" animated v-else>
    <q-tab-panel name="follow" class="q-pa-none">
      <FollowUser
        :user-id="props.userId"
        :rows="rows"
        @remove="
          (id) => {
            rows = rows.filter((i) => i.id != id)
          }
        "
      ></FollowUser>
    </q-tab-panel>
    <q-tab-panel name="fans" class="q-pa-none">
      <FansUser
        :user-id="props.userId"
        :rows="rows"
        @remove="
          (id) => {
            rows = rows.filter((i) => i.id != id)
          }
        "
      ></FansUser>
    </q-tab-panel>
  </q-tab-panels>
  <q-card v-if="!loading && rows.length == 0" flat class="q-pt-sm q-ml-sm">
    <q-card-section class="text-center dark:bg-neutral-700">
      <div
        class="h-xs w-full bg-contain bg-center bg-no-repeat"
        style="background-image: url('images/no-data.svg')"
      ></div>

      <div class="text-base">暂无用户~~</div>
    </q-card-section>
  </q-card>
  <div
    class="q-py-sm full-width row flex-center q-ml-sm"
    v-show="!loading && pageParam.totalPage > 1"
  >
    <div>共 {{ pageParam.recordCount }} 位用户</div>
    <q-pagination
      @update:model-value="
        (value) => {
          pageParam.pageNum = value
          f5()
        }
      "
      v-model="pageParam.pageNum"
      :max="pageParam.totalPage"
      :max-pages="6"
      direction-links
    />
  </div>
</template>

<script setup lang="ts">
import FollowUser from './user-panel/FollowUser.vue'
import FansUser from './user-panel/FansUser.vue'
import { onMounted, ref, watch } from 'vue'
import { userHas, userTab } from './shared'
import type { ApiType } from 'src/service/api'
import { personalUserList } from 'src/service/api'
import { useRouter } from 'vue-router'

const props = defineProps<{
  userId: string
  panelTab: string
}>()

const router = useRouter()

const pageParam = ref({
  userId: props.userId,
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
  text: '',
  type: props.panelTab,
})

const loading = ref(false)
type rowsType = ApiType<typeof personalUserList>['Return']['rows'][0]

const rows = ref<Array<rowsType>>([])

watch(
  () => props.panelTab,
  (val) => {
    if (userHas(val)) {
      pageParam.value.type = val
      f5()
    }
  },
)

watch(
  () => props.userId,
  (val) => {
    if (userHas(pageParam.value.type)) {
      pageParam.value.userId = val
      f5()
    }
  },
)

onMounted(() => {
  if (userHas(pageParam.value.type)) {
    f5()
  }
})
const f5 = () => {
  rows.value = []
  loading.value = true
  personalUserList(pageParam.value).then(({ data, error }) => {
    loading.value = false
    if (!error) {
      pageParam.value.totalPage = data.totalPage
      pageParam.value.recordCount = data.recordCount
      rows.value = data.rows
    }
  })
}
</script>

<style scoped></style>
